<template>
	<view class="page">
		<view class="top">
			<view class="youxiaoqi" v-if="user.isMember==1">
				会员有效期：{{user.payFeeEndtime}}
			</view>
			<view class="infobox">
				<view class="imgbox">
					<image v-if="user.headImg"  :src="user.headImg" mode="" @click="upheadimg"></image>
						<image  v-if="!user.headImg" src="/static/tabbar/我 的.png" mode="" @click="upheadimg"></image>
					
				</view>
				<view class="info">
					
				    <view class="name">
				      {{user.memberName}}
				    </view>	
					<view class="vip" v-if="user.isMember==1">
						<view class="iconfont icon-huiyuan">
							
						</view>
						会员
					</view>	
					<view class="vip" v-if="user.isPromoter==1">
						<view class="iconfont icon-huiyuan">
							
						</view>
						推广者
					</view>
					<view class="vip" v-if="user.promoterStatus==0||user.auditStatus==0||user.promoterStatus==2||user.auditStatus==2">
						<view class="iconfont icon-huiyuan">
							
						</view>
						{{user.promoterStatus==0||user.auditStatus==0?'审核中':user.promoterStatus==2||user.auditStatus==2?'审核失败':''}}
					</view>
				</view>
			</view>
			<view class="getvip" v-if="(user.isMember===null||user.auditStatus===2)&&user.isPromoter==1" @click="kaitongvip">
				<view class="iconfont icon-huiyuan">
					
				</view>
				开通会员
			</view>
			<view  class="getvip" v-if="user.isMember==1" @click="gettuifei">
			  申请退费
			</view>
			<view  class="getvip" style="top: 70rpx;" v-if="(user.isMember==1 || user.isMember==2) && user.auditStatus==1" @click="xufei=true">
			  会员续费
			</view>
		</view>
		<view class="databox">
			<view class="dataline">
				<view class="datatitle">
					数据概况
				</view>
				<view class="datatab">
					<view class="itemtab" :class="tab=='today'?'act':''" @click="selecttab('today')">
						今日
					</view>
					<view class="itemtab" :class="tab=='yesterday'?'act':''" @click="selecttab('yesterday')">
						昨日
					</view>
					<view class="itemtab" :class="tab=='week'?'act':''" @click="selecttab('week')">
						近7天
					</view>
					<view class="itemtab" :class="tab=='month'?'act':''" @click="selecttab('month')">
						近30日
					</view>
					<view class="itemtab" :class="tab=='custom'?'act':''" @click="selecttab('custom')">
						自定义
					</view>
				</view>
				
			</view>
			<view class="dataline" style="border: none;">
				<uni-datetime-picker  v-if="dataline" v-model="range" type="daterange" @maskClick="maskClick" />
			</view>
			<view class="numbanner">
				<view class="itemnum">
					<view class="num">
						{{bannerdata.commissionAmount||'0'}}
					</view>
					<view class="numlabel">
						佣金金额
					</view>
				</view>
				<view class="itemnum">
					<view class="num">
					{{bannerdata.salesAmount||'0'}}
					</view>
					<view class="numlabel">
						销售额
					</view>
				</view>
				<view class="itemnum">
					<view class="num">
						{{bannerdata.orderCount||'0'}}
					</view>
					<view class="numlabel">
						成单量
					</view>
				</view>
				<view class="itemnum">
					<view class="num">
						{{bannerdata.withdrawalAmount||'0'}}
					</view>
					<view class="numlabel">
						提现金额
					</view>
				</view>
				<view class="itemnum">
					<view class="num">
						{{bannerdata.rechargeAmount||'0'}}
					</view>
					<view class="numlabel">
						充值金额
					</view>
				</view>
				<view class="itemnum">
					<view class="num">
						{{bannerdata.totalCount||'0'}}
					</view>
					<view class="numlabel">
						新增我的下级
					</view>
				</view>
			</view>
		
		</view>
		<view class="bannerbox">
			<view class="itembanner red" @click="myyajin">
				<view class="bannername">
					 我的押金
				</view>
				<view class="num">
					{{user.deposit||'0'}}
				</view>
				<view class="bannerbtn">
					更多
				</view>
			</view>
			<view class="itembanner yellow" @click="gofanrun">
				<view class="bannername">
					 我的返润
				</view>
				<view class="num">
					{{user.commissionAmount||'0'}}
				</view>
				<view class="bannerbtn">
					提现
				</view>
			</view>
			<view class="itembanner perpor" @click="shengyupingtaijifen">
				<view class="bannername">
					 剩余平台积分商品
				</view>
				<view class="num">
					{{pingtaigood||'0'}}
				</view>
				<view class="bannerbtn">
				   购入商品
				</view>
			</view>
			<view class="itembanner blue" @click="wodexiaji">
				<view class="bannername">
					 我的下级
				</view>
				<view class="num">
					{{user.xiajiCount||'0'}}
				</view>
				<view class="bannerbtn" >
					更多
				</view>
			</view>
		</view>
		<view class="gongnengbox">
			<view class="gongnengtitle">
				常用功能
			</view>
			<view class="gongnengline">
				<view class="itemgongneng" @click="mygood">
					<view class="yuan cheng">
						<view class="iconfont icon-liebiaomoshi_kuai">
							
						</view>
						
					</view>
					<view class="gongnengname">
						我的商品
					</view>
				</view>
				<view class="itemgongneng" @click="jifenlist">
					<view class="yuan cheng">
						<view class="iconfont icon-huizhang1">
							
						</view>
						
					</view>
					<view class="gongnengname">
						积分记录
					</view>
				</view>
				<view class="itemgongneng" @click="selllist">
					<view class="yuan lan">
						<view class="iconfont icon-gouwuchekong">
							
						</view>
						
					</view>
					<view class="gongnengname">
						售出记录
					</view>
				</view>
				<view class="itemgongneng" @click="paylist">
					<view class="yuan lv">
						<view class="iconfont icon-wendang">
							
						</view>
						
					</view>
					<view class="gongnengname">
						购买记录
					</view>
				</view>
			</view>
		</view>
		<view class="line" @click="tuiguangma">
			<view class="left">
				<view class="iconfont icon-erweima" style="color: #BD00FF;">
					
				</view>
			    我的推广码
			</view>
			<view class="iconfont icon-xiangxia">
				
			</view>
		</view>
		<view class="line" @click="mysancode">
			<view class="left">
				<view class="iconfont icon-erweima1" style="color: #1EB9B9;">
					
				</view>
			    我的收款码
			</view>
			<view class="iconfont icon-xiangxia">
				
			</view>
		</view>
		<view class="line">
			<view class="left">
				<view class="iconfont icon-kefu" style="color: #FF7A00;">
					
				</view>
			    联系客服
			</view>
			<view class="iconfont icon-xiangxia">
				
			</view>
		</view>
		<view class="line" @click='outlogin' >
			<view class="left">
				<view class="iconfont  icon-laihui" style="color: #FF7A00;">
					
				</view>
			    注销登录
			</view>
			<view class="iconfont icon-xiangxia">
				
			</view>
		</view>

		<view class="winpage" v-if="win2show">
			<view class="win2">
				<view class="iconfont icon-guanbi guanbi" @click="guanbi"></view>
				<view class="win2title">
					我的收款码
				</view>
				<view class="mysancodeimgbox">
					<image :src="'https://admin.caifubang.top/prod-api'+user.collectionQrCode"  @click="showshoukuan"></image>
				</view>
				<view class="win1title">
					修改收款码
				</view>
				<view class="malistbox">
					<image v-for="(item,index) in newimgurl" :key="index" :src="'https://admin.caifubang.top/prod-api'+item" mode="" @click="showerweima"></image>
					<view class="addbox" v-if="newimgurl.length==0" @click="upmyimg">
						+
					</view>
				</view>
				<view class="malisttitle">
					点击上传收款二维码图片，保证图片真是，清晰
				</view>
				
				<view class="upbtn" @click="updatemysancode">
					提交审核
				</view>
			</view>
		</view>
		<view class="winpage" v-if="win3show">
			<view class="win2">
				<view class="iconfont icon-guanbi guanbi" @click="guanbi"></view>
				<view class="win2title">
					我的推广码
				</view>
				<view class="mysancodeimgbox">
					<image :src="'https://admin.caifubang.top/prod-api'+user.referralQrCode" mode=""></image>
				</view>
			</view>
		</view>
		<view class="winpage" v-if="win4show">
			<view class="win1">
				<view class="iconfont icon-guanbi guanbi" @click="guanbi"></view>
				<view class="win1title">
				  最多可退{{maxmonth}}个月
				</view>
			     <input class="picker" type="number" placeholder="请输入退费月数" v-model="putoutmonth" />
				<view class="priceline">
					<view class="linetitle">
						可退 
					</view>
					<view class="price">
						￥{{Number(maxmonth)*Number(yuefei)}}
					</view>
				</view>
				<view class="pagebtn" @click="tijiaotuifei">
					提交审核
				</view>
			</view>
		</view>
		
		
		<view class="winpage" v-if="xufei">
			<view class="win1" style="height: 75vh;">
				<view class="iconfont icon-guanbi guanbi" @click="guanbi"></view>
				<view class="win1title">
				   续费月数
				</view>
				 <input class="picker" type="number" placeholder="请输入续费月数" v-model="xufeinum" />
				<view class="imgbox">
					<image  :src="'https://admin.caifubang.top/prod-api'+sancode"  @click="showsancode"></image>
				</view>
				<view class="priceline">
					<view class="linetitle">
						应付
					</view>
					<view class="price">
						￥{{Number(xufeinum)*Number(yuefei)}}
					</view>
				</view>
				<view class="upbox">
					<view class="putitle">
						上传支付记录
					</view>
					<view class="imglist" >
						<image v-for="(item,index) in xufeiurllist" :key="index"    :src="'https://admin.caifubang.top/prod-api'+item"  @click="yulanxufei"></image>
						<view  class="upbtn" @click="upxufeiimg">
							+
						</view>
					</view>
					<view class="imglabel">
						点击上传支付记录图片，保证图片真实，清晰
					</view>
				</view>
				<view class="pagebtn" @click="tijiaoxufei">
					提交审核
				</view>
			</view>
		</view>
		
		
		<view class="winpage" v-if="win5show">
			<view class="win5" >
				<view class="iconfont icon-guanbi guanbi" @click="guanbi"></view>
			     <view class="putline">
			     	 <view class="danwei">
			     	 	￥
			     	 </view>
					 <input type="number" placeholder="请输入金额" v-model="setmoney" />
			     </view>
				<view class="labelbox">
					<view class="label1">
						扫码支付
					</view>
					<view class="title1">
						识别下方二维码支付
					</view>
				</view>
					
				<view class="imgbox">
					<image  :src="'https://admin.caifubang.top/prod-api'+sancode" @click="showpingtai" mode=""></image>
				</view>
				<view class="pricetitle">
					 应付 <view class="price">￥{{setmoney}}</view>
				</view>
				<view class="upbox">
					<view class="putitle">
						上传支付记录
					</view>
					<view class="imglist" >
						<image v-for="(item,index) in payseturl" :key="index"    :src="'https://admin.caifubang.top/prod-api'+item"  @click="yulan"></image>
						<view  class="upbtn" @click="uppayimg">
							+
						</view>
					</view>
					<view class="imglabel">
						点击上传支付记录图片，保证图片真实，清晰
					</view>
				</view>
				<view class="pagebtn" @click="tijiaozhifu">
				  提交审核
				</view>
			</view>
		</view>
		<view class="winpage" v-if="smallwin">
			<view class="smallwin">
				<view class="smalltitle">
					提示
				</view>
				<view class="smallcontent">
					审核失败或未申请，请重新提交资料
				</view>
				<view class="smallbtn" @click="gobanner">
					去提交
				</view>
			</view>
		</view>
	</view>
</template>

<script>

	import {getMemberById,updateMemberById,GetdataStatistics,getSysConfigByType,getRefundableMonths,applyRefund,createSalesOrder,CZMemberFree} from '../../utils/api.js'
	export default {
		data() {
			return {
				xufeinum:'',
				xufeiurllist:[],
				xufei:false,
				payseturl:[],
				setmoney:'',
				sancode:'',
				yuefei:Number,
				putoutmonth:'',
				maxmonth:'',
				monthlist:[
					{
						type:3,
						label:'3个月'
					},
					{
						type:4,
						label:'4个月'
					},
					{
						type:5,
						label:'5个月'
					},
					{
						type:6,
						label:'6个月'
					},
					{
						type:7,
						label:'7个月'
					},
					{
						type:8,
						label:'8个月'
					},
					
					{
						type:9,
						label:'9个月'
					},
					
					{
						type:10,
						label:'10个月'
					},
					{
						type:11,
						label:'11个月'
					},
					
					{
						type:12,
						label:'12个月'
					}
				],
				monthindex:0,
				pingtaigood:'',
				dataline:false,
				range:'',
				user:{},
				bannerdata:{},
				tab:'today',
				win1show:false,
				win2show:false,
				win3show:false,
				win4show:false,
				win5show:false,
				smallwin:false,
				oldimgurl:'',
				newimgurl:[],
				index1:'',
				array:[
					{
						type:1,
						label:'押金'
					},
					{
						type:2,
						label:'会员'
					}
				]
			}
		},
		 
		onShow() {
			getSysConfigByType('sys_member_shiptc').then(res=>{
				console.log(res)
				this.yuefei=res.data.data.value
			})
			
			getSysConfigByType('sys_platform_ercode').then(res=>{
			
				this.sancode=res.data.data.value
			})
			
			getSysConfigByType('sys_available_product').then(res=>{
				
				this.pingtaigood=res.data.data.value
			})
			this.tab='today'
			getMemberById().then(res=>{
				console.log(res,'这是个人信息')
				this.user=res.data.data
				if((res.data.data.isMember!=1&&res.data.data.isPromoter!=1)&&(res.data.data.promoterStatus==2||res.data.data.auditStatus==2)){
					this.smallwin=true
				}
				if(res.data.data.isMember===null&&res.data.data.isPromoter===null){
					this.smallwin=true
				}
			})
			let p={
				dateType:this.tab,
				startDate:'',
				endDate:''
			}
			GetdataStatistics(p).then(res=>{
				
				this.bannerdata=res.data.data
			})
		},
		 watch: {
		    range(newVal, oldVal) {
		     
		      let p={
		      	dateType:'custom',
		      	startDate:newVal[0],
		      	endDate:newVal[1]
		      }
		      GetdataStatistics(p).then(res=>{
		      	
		      	this.bannerdata=res.data.data
		      })
		    }
		  },
		methods: {
			outlogin(){
				uni.showModal({
					title: '提示',
					content: '确定退出吗？',
					success: function (res) {
						if (res.confirm) {
							uni.clearStorageSync()
							uni.redirectTo({
								url:'/pages/login/login'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			
			kaitongvip(){
				uni.redirectTo({
					url:'/pages/banner/banner?show='+'fasle'
				})
			},
			showshoukuan(){
				let list=[]
				let url='https://admin.caifubang.top/prod-api'+ this.user.referralQrCode
				list.push(url)
				console.log(list)
				uni.previewImage({
							urls:list,
							longPressActions: {
								itemList: ['发送给朋友', '保存图片', '收藏'],
								success: function(data) {
									console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
								},
								fail: function(err) {
									console.log(err.errMsg);
								}
							}
						});
			},
			showpingtai(){
				let list=[]
				let url='https://admin.caifubang.top/prod-api'+ this.sancode
				list.push(url)
				console.log(list)
				uni.previewImage({
							urls:list,
							longPressActions: {
								itemList: ['发送给朋友', '保存图片', '收藏'],
								success: function(data) {
									console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
								},
								fail: function(err) {
									console.log(err.errMsg);
								}
							}
						});
			},
			
			showsancode(){
				let list=[]
				let url='https://admin.caifubang.top/prod-api'+ this.sancode
				list.push(url)
				console.log(list)
				uni.previewImage({
							urls:list,
							longPressActions: {
								itemList: ['发送给朋友', '保存图片', '收藏'],
								success: function(data) {
									console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
								},
								fail: function(err) {
									console.log(err.errMsg);
								}
							}
						});
			},
			mygood(){
				uni.navigateTo({
					url:'/pages/mygood/mygood'
				})
			},
			
			shengyupingtaijifen(){
				if(this.user.isMember!=1){
					uni.showToast({
						title: '您还不是会员',
						icon:'none',
						duration: 2000
					});
					return
				}
				this.win5show=true
			},
			
			tijiaoxufei(){
				if(this.xufeinum==''){
					uni.showToast({
						title: '请输入续费月数',
						icon:'none',
						duration: 2000
					});
					return
				}
				if(this.xufeiurllist.length==0){
					uni.showToast({
						title: '请上传支付凭证',
						icon:'none',
						duration: 2000
					});
					return
				}
				let p={
					pay_month:this.xufeinum,
					type:2,
					payFeeScreenshot:this.xufeiurllist.join(',')
				}
				CZMemberFree(p).then(res=>{
					console.log(res)
					if(res.data.code==200){
						uni.showToast({
							title: '已提交等待审核',
							icon:'none',
							duration: 2000
						});
						this.xufei=false
						this.xufeiurllist=[]
						this.xufeinum=''
					}
				})
			},
			gobanner(){
				uni.redirectTo({
					url:'/pages/banner/banner'
				})
			},
			
			tijiaozhifu(){
				if(this.setmoney==''){
					uni.showToast({
						title: '请输入购买金额',
						icon:'none',
						duration: 2000
					});
					return
				
				}
				if(this.payseturl.length==0){
					uni.showToast({
						title: '请上传支付截图',
						icon:'none',
						duration: 2000
					});
					return
				
				}
				let p={
					productjifen:this.setmoney,
					paymentScreenshotUrl:this.payseturl.join(',')
				}
				createSalesOrder(p).then(res=>{
					console.log(res)
					if(res.data.code==200){
						uni.showToast({
							title: '已提交等待审核',
							icon:'none',
							duration: 2000
						});
						this.win5show=false
						this.payseturl=[]
						this.setmoney=''
					}
				})
			},
			gofanrun(){
				uni.navigateTo({
					url:'/pages/backmoney/backmoney'
				})
			},
			
			tijiaotuifei(){
				if(this.putoutmonth==''){
					uni.showToast({
						title: '请输入退费月数',
						icon:'none',
						duration: 2000
					});
					return
				}
				if(Number(this.maxmonth)<Number(this.putoutmonth)){
					uni.showToast({
						title: '超过可退月数',
						icon:'none',
						duration: 2000
					});
					return

				}
				let that=this
				uni.showModal({
					title: '提示',
					content: '确定退费吗？',
					success: function (res) {
						if (res.confirm) {
							let p={
								refundMonths:that.putoutmonth
							}
							applyRefund(p).then(res=>{
								console.log(res)
								if(res.data.code==200){
									uni.showToast({
										title: '提交成功',
										icon:'none',
										duration: 2000
									});
									that.win4show=false
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			

			
			//显示推广码
			tuiguangma(){
				this.win3show=true
			},
			//修改收款二维码
			updatemysancode(){
				let that=this
				uni.showModal({
					title: '提示',
					content: '保存收款二维码',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
							let a={
							collectionQrCode:that.newimgurl[0]
							}
							updateMemberById(a).then(res=>{
								if(res.data.code==200){
									getMemberById().then(res=>{
										console.log(res,'这是个人信息')
										that.user=res.data.data
										that.win2show=false
										that.newimgurl=[]
										
									})
								}
									
																				 
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			
			maskClick(e){
				
			},
			
			//跳转到我的押金
			myyajin(){
				if(this.user.isMember!=1){
					uni.showToast({
						title: '您还不是会员',
						icon:'none',
						duration: 2000
					});
					return
				}
				uni.navigateTo({
					url:'/pages/yajin/yajin'
				})
			},
			//跳转到我的下级
			wodexiaji(){
				uni.navigateTo({
					url:'/pages/xiaji/xiaji'
				})
			},
			
			//跳转我的积分记录
			jifenlist(){
				uni.navigateTo({
					url:'/pages/jifenlist/jifenlist'
				})
			},
			//上传头像
			upheadimg(){
				
				let that=this
				uni.chooseImage({
					count: 1, 
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
					   const file = res.tempFiles[0]  // File 对象
					   
										   uni.uploadFile({
										        url: 'https://admin.caifubang.top/prod-api/system/WeChatPublicApi/uploadImage',
										        file: file,                     // H5 用
										        name: 'file',
												 header: {
												    Authorization: 'Bearer ' + uni.getStorageSync('token'), 
												  },
										        success: (uploadRes) => {
												 // that.user.headImg=JSON.parse(uploadRes.data).data.fileName
												
												 let a={
													 headImg:JSON.parse(uploadRes.data).data.fileName
												 }
												 updateMemberById(a).then(rs=>{
													getMemberById().then(res=>{
														console.log(res,'这是个人信息')
														that.user=res.data.data
													})
													 
												 })
										        }
										      })}
				});
			},
			//上传续费图片
			upxufeiimg(){
				if(this.xufeinum==''){
					uni.showToast({
						title: '请输入续费月数',
						icon:'none',
						duration: 2000
					});
					return
				}
				let that=this
				uni.chooseImage({
					count: 1, 
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
					   const file = res.tempFiles[0]  // File 对象
					   
										   uni.uploadFile({
										        url: 'https://admin.caifubang.top/prod-api/system/WeChatPublicApi/uploadImage',
										        file: file,                     // H5 用
										        name: 'file',
												 header: {
												    Authorization: 'Bearer ' + uni.getStorageSync('token'), 
												  },
										        success: (uploadRes) => {
												  that.xufeiurllist.push(JSON.parse(uploadRes.data).data.fileName)
												
										        }
										      })}
				});
			},
			
			
			//跳转到我的购买记录
			paylist(){
				uni.navigateTo({
					url:'/pages/paylist/paylist'
				})
			},
			
			//跳转到我的销售记录
			selllist(){
				uni.navigateTo({
				url:'/pages/sell/sell'
				})
			},
			
			//选择查询时间
			selecttab(e){
				this.tab=e
				
				if(e!='custom'){
					this.dataline=false
					let p={
						dateType:this.tab,
						startDate:'',
						endDate:''
					}
					GetdataStatistics(p).then(res=>{
						
						this.bannerdata=res.data.data
					})
				}else{
					this.dataline=true
				}
			},
			
			
			//显示退费按钮
			gettuifei(){
				this.win4show=true
				getRefundableMonths().then(res=>{
					this.maxmonth=res.data.data.remainingMonths
				})
			
			},
			
			//关闭弹窗
			guanbi(){
				this.win1show=false
				this.win2show=false
				this.win3show=false
				this.win4show=false
				this.win5show=false
				this.xufei=false
			},
			
			//显示我的收款二维码弹窗
			mysancode(){
				this.win2show=true
			},
			
			//上传我的收款二维码
			upmyimg(){
				
				let that=this
				uni.chooseImage({
					count: 1, 
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
					   const file = res.tempFiles[0]  // File 对象
					      console.log(file)
										   uni.uploadFile({
										        url: 'https://admin.caifubang.top/prod-api/system/WeChatPublicApi/uploadImage',
										        file: file,                     // H5 用
										        name: 'file',
												 header: {
												    Authorization: 'Bearer ' + uni.getStorageSync('token'), 
												  },
										        success: (uploadRes) => {
												 that.newimgurl.push(JSON.parse(uploadRes.data).data.fileName)
												 console.log('上传成功', that.newimgurl)
										        }
										      })}
				});
			},
			
			//预览我的收款二维码
			showerweima(e){
				const baseUrl = "https://admin.caifubang.top/prod-api"
				let urllist = this.newimgurl.map(path => baseUrl + path)
				uni.previewImage({
							urls: urllist,
							longPressActions: {
								itemList: ['发送给朋友', '保存图片', '收藏'],
								success: function(data) {
									console.log(data)
									console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
								},
								fail: function(err) {
									console.log(err.errMsg);
								}
							}
						})
			},
			//预览图片
			yulan(e){
				const baseUrl = "https://admin.caifubang.top/prod-api"
				let imglist = this.payseturl.map(path => baseUrl + path)
				uni.previewImage({
							urls: imglist,
							longPressActions: {
								itemList: ['发送给朋友', '保存图片', '收藏'],
								success: function(data) {
									console.log(data)
									console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
								},
								fail: function(err) {
									console.log(err.errMsg);
								}
							}
						})
			},
			yulanxufei(e){
				const baseUrl = "https://admin.caifubang.top/prod-api"
				let imglist = this.xufeiurllist.map(path => baseUrl + path)
				uni.previewImage({
							urls: imglist,
							longPressActions: {
								itemList: ['发送给朋友', '保存图片', '收藏'],
								success: function(data) {
									console.log(data)
									console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
								},
								fail: function(err) {
									console.log(err.errMsg);
								}
							}
						})
			},
			
			
			//上传我购买的记录
			uppayimg(){
				if(this.setmoney==''){
					uni.showToast({
						title: '请输入购买金额',
						icon:'none',
						duration: 2000
					});
					return

				}
				let that=this
				uni.chooseImage({
					count: 1, 
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
					   const file = res.tempFiles[0]  // File 对象
					      console.log(file)
										   uni.uploadFile({
										        url: 'https://admin.caifubang.top/prod-api/system/WeChatPublicApi/uploadImage',
										        file: file,                     // H5 用
										        name: 'file',
												 header: {
												    Authorization: 'Bearer ' + uni.getStorageSync('token'), 
												  },
										        success: (uploadRes) => {
												 that.payseturl.push(JSON.parse(uploadRes.data).data.fileName)
												 console.log('上传成功', that.newimgurl)
										        }
										      })}
				});
			},
		}
	}
</script>

<style lang="less" scoped>
 .page{
	 width: 750rpx;
	 box-sizing: border-box;
	 padding-bottom: 50rpx;
	 background-color: whitesmoke;
	 .top{
		 width: 100%;
		 height: 300rpx;
		 background-color: #ff4735;
		 box-sizing: border-box;
		 padding-top: 60rpx;
		 position: relative;
	
		 .youxiaoqi{
		 			 position: absolute;
		 			 right: 0;
		 			 top: 00rpx;
		 			 color: #FFE091;
		 			 font-size: 26rpx;
					 padding: 4rpx 8rpx;
		 			 background-color: rgba(255, 0, 0, 0.3);
		 }
		
		 .getvip{
			 background-color:#FAD58C;
			 color: #A30000 ;
			 display: flex;
			 align-items: center;
			 justify-content: center;
			 border-top-left-radius: 20rpx;
			 border-bottom-left-radius: 20rpx;
			 position: absolute;
			 font-size: 28rpx;
			 padding: 10rpx 20rpx;
			 right: 0;
			 top: 150rpx;
		 }
		 .infobox{
			width: 100%;
			 display: flex;
			 align-items: center;
	
			 .imgbox{
				 width: 120rpx;
				 height: 120rpx;
				 border-radius: 50%;
				  margin-left: 20rpx;
				 
				 image{
					 width: 100%;
					 height: 100%;
					 border-radius: 50%;
				 }
			
			 }
			 .info{
				 color: white;
				 margin-left: 20rpx;
				 .imgtitle{
				width: 100%;
				 height: 100%;
				border-radius: 50%;
				 					
				 }
				 .name{
					 font-weight: bold;
				 }
				 .vip{
					background-color:#FAD58C;
					color: #A30000 ;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 20rpx;
					font-size: 26rpx;
					padding: 4rpx 6rpx;
					margin-top: 8rpx;
					
				 }
			 }
		 }
	 }
	 .databox{
		 width: 90%;
		 margin: auto;
		 box-sizing: border-box;
		 padding: 20rpx;
		 background-color: white;
		position: absolute;
				 top: 220rpx;
				 left: 5%;
				 border-radius: 20rpx;
				
		 .dataline{
			 width: 100%;
			 height: 80rpx;
			 line-height: 80rpx;
			 display: flex;
			 align-items: center;
			 border-bottom: 10rpx solid #D10C00;
			 padding-bottom: 20rpx;
			 .datatitle{
				 font-weight: bold;
			 }
			 .datatab{
				 flex: 1	;
				 display: flex;
				 align-items: center;
				 justify-content: space-evenly;
				 font-size: 30rpx;
				 color: gray;
				 font-weight: bold;
			 }
			 .act{
				 color:#FF2C1F !important;
			 }
		 }
		 .numbanner{
			 width: 100%;
			 display: flex;
			 align-items: flex-start;
			 flex-wrap: wrap;
			 padding-top: 30rpx;
			 .itemnum{
				 width: 33.3%;
				 text-align: center;
				 line-height: 2;
				 font-size: 26rpx;
				 .num{
					 font-size: 32rpx;
				 }
				 .numlabel{
					 color:#8B8B8B ;
				 }
			 }
		 }
	 }
    .bannerbox{
		margin-top: 400rpx;
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding: 20rpx;
		.itembanner{
			width: 48%;
			box-sizing: border-box;
			padding: 20rpx;
			border-radius: 20rpx;
			margin: 1%;
			font-size: 30rpx;
			.bannerbtn{
				width: 120rpx;
				height: 32rpx;
				font-size: 26rpx;
				text-align: center;
				line-height: 32rpx;
				border-radius: 10rpx;
				margin-left: 60%;
			}
			.num{
				font-weight: bold;
			}
		}
		.red{
			background-color: #FFE1D9 ;
			.bannerbtn{
				color: #FF701F;
				border: 1rpx solid #FF701F;
			}
			
		}
		.perpor{
			background-color: #F7D9FF ;
			.bannerbtn{
				color: #AA1FFF ;
				border: 1rpx solid #AA1FFF;
			}
		}
		.yellow{
			background-color: #FBF3D4  ;
			.bannerbtn{
				color: #BAA222 ;
				border: 1rpx solid #BAA222;
			}
			
		}
		.blue{
			background-color: #E9F8FF ;
			.bannerbtn{
				color: #225FBA  ;
				border: 1rpx solid #225FBA;
			}
			
		}
	 }
	 .gongnengbox{
		 width: 100%;
		 background-color: white;
		 border-radius: 20rpx;
		 margin: 30rpx 0;
		 box-sizing: border-box;
		 padding: 20rpx;
		 .gongnengtitle{
			 font-weight: bold;
		 }
		 .gongnengline{
			 width: 100%;
			 display: flex;
			 align-items: center;
			 justify-content: space-evenly;
			 margin-top: 20rpx;
			 .itemgongneng{
				 .cheng{
					background-color: #FFE7D0 ; 
					color: #FF7A00 ;
				 }
				 .lan{
					 background-color: #E6F0FF  ;
					 color: #0066FF ;
				 }
				 .lv{
					 background-color: #D7FFD4  ;
					 color: #3E9437 ;
				 }
				 .yuan{
					 width: 100rpx;
					 height: 100rpx;
					 border-radius: 50%;
					 line-height: 100rpx;
					 text-align: center;
					 margin: auto;
					 .iconfont{
						 font-size: 40rpx;
					 }
					 
				 }
				 .gongnengname{
					 font-size: 26rpx;
					 margin-top: 10rpx;
					 text-align: center;
				 }
			 }
		 }
	 }
	 .line{
		 width: 96%;
		 margin: auto;
		 box-sizing: border-box;
		 padding: 2rpx 20rpx;
		 height: 80rpx;
		 background-color: white;
		 display: flex;
		 align-items: center;
		 
		 justify-content: space-between;
		 .left{
			 display: flex;
			 font-weight: bold;
			 font-size: 30rpx;
			 align-items: center;
			 .iconfont{
				 font-size: 40rpx;
				 margin-right: 20rpx;
			 }
		 }
		 .iconfont{
			 color: gray;
		 }
	 }
	 .winpage{
		 width: 100vw;
		 height: 100vh;
		 position: fixed;
		 top: 0;
		 left: 0;
		 right: 0;
		 bottom: 0;
		 background-color: rgba(0, 0, 0, 0.5);
		 box-sizing: border-box;
		 .smallwin{
			 width: 60%;
			 background-color: white;
			 position: absolute;
			 top: 35vh;
			 left: 20%;
			 box-sizing: border-box;
			 padding: 20rpx;
			 border-radius: 20rpx;
			 .smalltitle{
				 text-align: center;
				 font-size: 34rpx;
				 font-weight: bold;
			 }
			 .smallcontent{
				 text-align: center;
				 margin-top: 30rpx;
				 font-size: 28rpx;
				 color: gray;
				 border-bottom: 1rpx solid whitesmoke;
			 }
			 .smallbtn{
				 font-size: 30rpx;
				 text-align: center;
				 margin-top: 30rpx;
			 }
		 }
		 .win2{
			 width: 100%;
			 height: 60vh;
			 position: absolute;
			 bottom: 0;
			 left: 0;
			 right: 0;
			 background-color: white;
			 border-top-right-radius: 20rpx;
			 border-top-left-radius: 20rpx;
			 overflow-y: auto;
			 box-sizing: border-box;
			 padding: 20rpx;
			 .guanbi{
			   position: absolute;
			   right: 10rpx;
			   top: 10rpx;
			 }
			 .win1title{
			 				 font-weight: bold;
			 }
			 .win2title{
				 font-weight: bold;
				 text-align: center;
			 }
			 .mysancodeimgbox{
				 width: 300rpx;
				 height: 300rpx;
				 margin:50rpx auto;
				 border: 8rpx solid orange;
				 box-sizing: border-box;
				 
				 image{
					 width: 100%;
					 height: 100%;
				 }
			 }
			 .malistbox{
				 margin: 20rpx auto;
				 width: 150rpx;
				 
				 image{
					 width: 120rpx;
					 height: 120rpx;
				 }
				 .addbox{
					 width: 120rpx;
					 height: 120rpx;
					 background-color: whitesmoke;
					 line-height: 120rpx;
					 text-align: center;
					 font-size: 50rpx;
					 color: gray;
				 }
			 }
			 .malisttitle{
				 font-size: 30rpx;
				 color: gray;
				 text-align: center;
			 }
			 .upbtn{
				 width: 80%;
				 height: 80rpx;
				 margin: auto;
				 margin-top: 50rpx;
				 text-align: center;
				 line-height: 80rpx;
				 color: white;
				 border-radius: 40rpx;
				 background-color: #FF5C00;
			 }
			 
		 }
		 .win5{
			 width: 100%;
			 height: 83vh;
			 position: absolute;
			 bottom: 0;
			 left: 0;
			 right: 0;
			 background-color: white;
			 border-top-right-radius: 20rpx;
			 border-top-left-radius: 20rpx;
			 overflow-y: auto;
			 box-sizing: border-box;
			 padding: 20rpx;
			 .guanbi{
			   position: absolute;
			   right: 10rpx;
			   top: 10rpx;
			 }
			 .putline{
			 				 width: 90%;
			 				 margin: auto;
			 				 height: 80rpx;
			 				 line-height: 80rpx;
			 				 display: flex;
			 				 align-items: center;
			 				 border-bottom: 1rpx solid whitesmoke;
			 				 .danwei{
			 					 font-size: 40rpx;
			 					 font-weight: bold;
			 					 
			 				 }
			 }
			 .labelbox{
			 	width: 100%;
			 	box-sizing: border-box;
			 	padding: 20rpx;
			 	margin-top: 50rpx;
			 	text-align: left;
			 	line-height: 2;
			 	.label1{
			 		font-weight: bold;
			 		text-align: left;
			 	}
			 	.title1{
			 		font-size: 30rpx;
			 		text-align: left;
			 		color: #ADADAD ;
			 	}
			 }
			 .imgbox{
			 	margin: 40rpx auto;
			 	width: 300rpx;
			 	height: 300rpx;
			 	border: 10rpx solid orange;
			 	image{
			 		width: 100%;
			 		height: 100%;
			 	}
			 }
			 .pricetitle{
			 	display: flex;
			 	align-items: center;
			 	text-align: center;
			 	margin: auto;
			 	width: 100%;
			 	justify-content: center;
			 	.price{
			 		font-weight: bold;
			 		color: #FF2E00;
			 	}
			 }
			 .upbox{
			 	width: 90%;
			 	margin: auto;
			 	background-color: #F4F4F4;
			 	box-sizing: border-box;
			 	padding: 20rpx;
			 	.uptitle{
			 		font-weight: bold;
			 	}
			 	.imglist{
			 		width: 100%;
			 		display: flex;
			 		align-items: center;
			 		
			 		image{
			 			width: 150rpx;
			 			height: 150rpx;
			 			border-radius: 10rpx;
			 			margin: 10rpx;
			 		}
			 		.upbtn{
			 			width: 150rpx;
			 			height: 150rpx;
			 			border-radius: 10rpx;
			 			margin: 10rpx;
			 			line-height: 150rpx;
			 			text-align: center;
			 			font-size: 88rpx;
			 			background-color: white;
			             color: gray;
			 		}
			 	}
			 	.imglabel{
			 		color: gray;
			 		font-size: 28rpx;
			 	}
			 }
			 
			 .pagebtn{
			 	width: 90%;
			 	height: 80rpx;
			 	line-height: 80rpx;
			 	text-align: center;
			 	margin:100rpx auto;
			 	border-radius: 40rpx;
			 	color: white;
			 	background-color: #FF5C00 ;
			 }
		 }
		 .win1{
			 width: 100%;
			 height: 40vh;
			 position: absolute;
			 bottom: 0;
			 left: 0;
			 right: 0;
			 background-color: white;
			 border-top-right-radius: 20rpx;
			 border-top-left-radius: 20rpx;
			 overflow-y: auto;
			 box-sizing: border-box;
			 padding: 20rpx;
			 .guanbi{
			   position: absolute;
			   right: 10rpx;
			   top: 10rpx;
			 }
			 .imgbox{
			 	margin: 40rpx auto;
			 	width: 300rpx;
			 	height: 300rpx;
			 	border: 10rpx solid orange;
			 	image{
			 		width: 100%;
			 		height: 100%;
			 	}
			 }
			 .pricetitle{
			 	display: flex;
			 	align-items: center;
			 	text-align: center;
			 	margin: auto;
			 	width: 100%;
			 	justify-content: center;
			 	.price{
			 		font-weight: bold;
			 		color: #FF2E00;
			 	}
			 }
			 .upbox{
			 	width: 90%;
			 	margin: auto;
			 	background-color: #F4F4F4;
			 	box-sizing: border-box;
			 	padding: 20rpx;
			 	.uptitle{
			 		font-weight: bold;
			 	}
			 	.imglist{
			 		width: 100%;
			 		display: flex;
			 		align-items: center;
			 		
			 		image{
			 			width: 150rpx;
			 			height: 150rpx;
			 			border-radius: 10rpx;
			 			margin: 10rpx;
			 		}
			 		.upbtn{
			 			width: 150rpx;
			 			height: 150rpx;
			 			border-radius: 10rpx;
			 			margin: 10rpx;
			 			line-height: 150rpx;
			 			text-align: center;
			 			font-size: 88rpx;
			 			background-color: white;
			             color: gray;
			 		}
			 	}
			 	.imglabel{
			 		color: gray;
			 		font-size: 28rpx;
			 	}
			 }
			 .putline{
				 width: 90%;
				 margin: auto;
				 height: 80rpx;
				 line-height: 80rpx;
				 display: flex;
				 align-items: center;
				 border-bottom: 1rpx solid whitesmoke;
				 .danwei{
					 font-size: 40rpx;
					 font-weight: bold;
					 
				 }
			 }
			 .win1title{
				 font-weight: bold;
			 }
			 .pickerbox{
				 width: 100%;
				 height: 70rpx;
				 line-height: 70rpx;
				 border-bottom: 1rpx solid whitesmoke;
			 }
			 .picker{
				 width: 80%;
				 height: 80rpx;
				 line-height: 80rpx;
				
				 margin: 20rpx auto;
				 text-align: center;
				 border-bottom: 1rpx solid #d1d1d1;
			 }
			 .priceline{
				 display: flex;
				 align-items: center;
				 justify-content: center;
				 font-weight: bold;
				 font-size: 28rpx;
				 .price{
					 font-size: 30rpx;
					 color: red;
				 }
			 }
			 .win1labelline{
				 width: 100%;
				 display: flex;
				 align-items: center;
				 justify-content: center;
				 font-size: 30rpx;
				 font-weight: bold;
				 .price{
					 font-size: 32rpx;
					 color: #FF2E00 ;
				 }
			 }
			 
			 
			 
			 
			 .pagebtn{
			 	width: 90%;
			 	height: 80rpx;
			 	line-height: 80rpx;
			 	text-align: center;
			 	margin:100rpx auto;
			 	border-radius: 40rpx;
			 	color: white;
			 	background-color: #FF5C00 ;
			 }
		 }
	 }
 }
</style>
